<template>
  <div class="project-list">
    <div class="page-header">
      <h1 class="page-title">项目管理</h1>
      <div class="page-actions">
        <button class="create-btn primary-btn" @click="showCreateModal = true">
          <i class="fas fa-plus"></i> 新建项目
        </button>
      </div>
    </div>

    <div class="project-grid" v-if="projects.length > 0">
      <div v-for="project in projects" :key="project.id" class="project-card">
        <div class="project-header">
          <div class="project-category">{{ project.category }}</div>
          <div class="project-actions">
            <button class="action-btn edit-btn" @click="editProject(project)">
              <i class="fas fa-edit"></i>
            </button>
            <button class="action-btn delete-btn" @click="deleteProject(project)">
              <i class="fas fa-trash-alt"></i>
            </button>
          </div>
        </div>
        
        <div class="project-image">
          <img :src="project.image" :alt="project.title">
        </div>
        
        <div class="project-content">
          <h3 class="project-title">{{ project.title }}</h3>
          <p class="project-description">{{ project.description }}</p>
          
          <div class="project-tech-stack" v-if="project.techStack && project.techStack.length > 0">
            <span v-for="(tech, index) in project.techStack" :key="index" class="tech-tag">
              {{ tech }}
            </span>
          </div>
          
          <div class="project-links">
            <a v-if="project.demoLink" :href="project.demoLink" target="_blank" class="project-link">
              <i class="fas fa-external-link-alt"></i> 演示链接
            </a>
            <a v-if="project.codeLink" :href="project.codeLink" target="_blank" class="project-link">
              <i class="fab fa-github"></i> 代码仓库
            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="empty-state" v-else>
      <i class="fas fa-project-diagram"></i>
      <p>还没有添加任何项目</p>
      <button class="primary-btn" @click="showCreateModal = true">创建第一个项目</button>
    </div>

    <!-- 项目编辑/创建模态框 -->
    <div class="modal" v-if="showCreateModal || editingProject">
      <div class="modal-backdrop" @click="closeModal"></div>
      <div class="modal-content project-form-modal">
        <div class="modal-header">
          <h3>{{ editingProject ? '编辑项目' : '新建项目' }}</h3>
          <button class="close-btn" @click="closeModal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="saveProject">
            <div class="form-group">
              <label for="project-title">项目标题 <span class="required">*</span></label>
              <input 
                type="text" 
                id="project-title" 
                v-model="projectForm.title" 
                required
                placeholder="输入项目标题"
              >
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <label for="project-category">项目类别 <span class="required">*</span></label>
                <select id="project-category" v-model="projectForm.category" required>
                  <option value="">选择类别</option>
                  <option value="网站开发">网站开发</option>
                  <option value="移动应用">移动应用</option>
                  <option value="后端开发">后端开发</option>
                  <option value="开源项目">开源项目</option>
                  <option value="其他">其他</option>
                </select>
              </div>
              
              <div class="form-group">
                <label for="project-date">完成日期</label>
                <input 
                  type="date" 
                  id="project-date" 
                  v-model="projectForm.completionDate"
                >
              </div>
            </div>
            
            <div class="form-group">
              <label for="project-description">项目描述 <span class="required">*</span></label>
              <textarea 
                id="project-description" 
                v-model="projectForm.description" 
                required
                rows="4"
                placeholder="描述项目的功能、目标和特点"
              ></textarea>
            </div>
            
            <div class="form-group">
              <label for="project-image">项目图片URL <span class="required">*</span></label>
              <input 
                type="url" 
                id="project-image" 
                v-model="projectForm.image" 
                required
                placeholder="输入项目图片的URL"
              >
              <div class="image-preview" v-if="projectForm.image">
                <img :src="projectForm.image" alt="项目预览图">
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <label for="project-demo-link">演示链接</label>
                <input 
                  type="url" 
                  id="project-demo-link" 
                  v-model="projectForm.demoLink" 
                  placeholder="输入项目演示链接"
                >
              </div>
              
              <div class="form-group">
                <label for="project-code-link">代码仓库链接</label>
                <input 
                  type="url" 
                  id="project-code-link" 
                  v-model="projectForm.codeLink" 
                  placeholder="输入代码仓库链接"
                >
              </div>
            </div>
            
            <div class="form-group">
              <label>技术栈</label>
              <div class="tech-input">
                <div class="tech-tags">
                  <span 
                    v-for="(tech, index) in projectForm.techStack" 
                    :key="index" 
                    class="tech-tag"
                  >
                    {{ tech }}
                    <button type="button" class="remove-tag" @click="removeTech(index)">
                      <i class="fas fa-times"></i>
                    </button>
                  </span>
                </div>
                <div class="tech-add">
                  <input 
                    type="text" 
                    v-model="newTech" 
                    placeholder="添加技术栈"
                    @keydown.enter.prevent="addTech"
                  >
                  <button type="button" class="add-tech-btn" @click="addTech">
                    <i class="fas fa-plus"></i>
                  </button>
                </div>
              </div>
            </div>
            
            <div class="form-group">
              <label for="project-featured">是否在首页展示</label>
              <div class="toggle-switch">
                <input 
                  type="checkbox" 
                  id="project-featured" 
                  v-model="projectForm.featured"
                >
                <label for="project-featured" class="toggle-label"></label>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="secondary-btn" @click="closeModal">取消</button>
          <button class="primary-btn" @click="saveProject">
            {{ editingProject ? '保存修改' : '创建项目' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProjectList',
  data() {
    return {
      projects: [],
      showCreateModal: false,
      editingProject: null,
      projectForm: {
        title: '',
        category: '',
        description: '',
        image: '',
        completionDate: '',
        demoLink: '',
        codeLink: '',
        techStack: [],
        featured: false
      },
      newTech: ''
    };
  },
  mounted() {
    this.fetchProjects();
  },
  methods: {
    // 获取项目列表
    async fetchProjects() {
      try {
        // 这里替换为实际API调用
        // const response = await projectService.getAll();
        // this.projects = response.data;
        
        // 模拟数据
        this.projects = [
          {
            id: 1,
            title: '飞车图鉴小程序',
            category: '移动应用',
            description: '基于 django + 微信小程序原生框架 的游戏工具，目前用户8000+，日活500+。',
            image: 'https://images.unsplash.com/photo-1607252650355-f7fd0460ccdb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80',
            completionDate: '2022-05-15',
            demoLink: '#',
            codeLink: '',
            techStack: ['微信小程序', 'Django', 'Python', 'SQLite'],
            featured: true
          },
          {
            id: 2,
            title: 'SQL测试数据生成器',
            category: '开源项目',
            description: '基于vue3的纯前端网页项目，自动生成测试数据SQL语句，支持对接Deepseek等AI大模型。',
            image: 'https://images.unsplash.com/photo-1537432376769-00f5c2f4c8d2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1650&q=80',
            completionDate: '2023-01-20',
            demoLink: 'https://sql-gen.example.com',
            codeLink: 'https://gitee.com/kzc_666/sql-generator.git',
            techStack: ['Vue 3', 'JavaScript', 'Tailwind CSS'],
            featured: true
          }
        ];
      } catch (error) {
        console.error('获取项目列表失败:', error);
      }
    },
    
    // 打开编辑模态框
    editProject(project) {
      this.editingProject = project;
      this.projectForm = { ...project };
      // 确保techStack是数组
      if (!Array.isArray(this.projectForm.techStack)) {
        this.projectForm.techStack = [];
      }
    },
    
    // 关闭模态框
    closeModal() {
      this.showCreateModal = false;
      this.editingProject = null;
      this.resetForm();
    },
    
    // 重置表单
    resetForm() {
      this.projectForm = {
        title: '',
        category: '',
        description: '',
        image: '',
        completionDate: '',
        demoLink: '',
        codeLink: '',
        techStack: [],
        featured: false
      };
      this.newTech = '';
    },
    
    // 添加技术栈标签
    addTech() {
      if (this.newTech.trim()) {
        if (!this.projectForm.techStack) {
          this.projectForm.techStack = [];
        }
        this.projectForm.techStack.push(this.newTech.trim());
        this.newTech = '';
      }
    },
    
    // 移除技术栈标签
    removeTech(index) {
      this.projectForm.techStack.splice(index, 1);
    },
    
    // 保存项目
    async saveProject() {
      try {
        if (this.editingProject) {
          // 编辑现有项目
          // 这里替换为实际API调用
          // await projectService.update(this.editingProject.id, this.projectForm);
          
          // 更新本地数据
          const index = this.projects.findIndex(p => p.id === this.editingProject.id);
          if (index !== -1) {
            this.projects[index] = { ...this.projectForm, id: this.editingProject.id };
          }
        } else {
          // 创建新项目
          // 这里替换为实际API调用
          // const response = await projectService.create(this.projectForm);
          
          // 添加到本地数据
          const newProject = {
            ...this.projectForm,
            id: this.projects.length + 1 // 模拟ID生成
          };
          this.projects.push(newProject);
        }
        
        // 关闭模态框并重置表单
        this.closeModal();
      } catch (error) {
        console.error('保存项目失败:', error);
      }
    },
    
    // 删除项目
    async deleteProject(project) {
      if (confirm(`确定要删除项目 "${project.title}" 吗？`)) {
        try {
          // 这里替换为实际API调用
          // await projectService.delete(project.id);
          
          // 从本地列表中移除
          this.projects = this.projects.filter(p => p.id !== project.id);
        } catch (error) {
          console.error('删除项目失败:', error);
        }
      }
    }
  }
};
</script>

<style scoped>
.project-list {
  padding: 20px 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.page-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--dark-text);
  margin: 0;
}

.primary-btn {
  background: linear-gradient(135deg, #4361ee, #3a0ca3);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(67, 97, 238, 0.2);
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(67, 97, 238, 0.3);
}

.secondary-btn {
  background: #f5f7fb;
  color: var(--dark-text);
  border: 1px solid #e0e0e0;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.secondary-btn:hover {
  background: #e9ecef;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}

.project-card {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
}

.project-category {
  display: inline-block;
  background-color: rgba(67, 97, 238, 0.1);
  color: var(--primary-color);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.project-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid #e0e0e0;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
}

.edit-btn:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.delete-btn:hover {
  background: var(--danger-color);
  color: white;
  border-color: var(--danger-color);
}

.project-image {
  height: 180px;
  width: 100%;
  overflow: hidden;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.project-card:hover .project-image img {
  transform: scale(1.05);
}

.project-content {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.project-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: var(--dark-text);
}

.project-description {
  margin: 0 0 15px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  flex-grow: 1;
}

.project-tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.tech-tag {
  display: inline-block;
  background-color: #f5f7fb;
  color: #666;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 500;
}

.project-links {
  display: flex;
  gap: 15px;
}

.project-link {
  color: var(--primary-color);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
}

.project-link:hover {
  color: var(--secondary-color);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.empty-state i {
  font-size: 50px;
  color: #ccc;
  margin-bottom: 20px;
}

.empty-state p {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

/* 模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
}

.modal-content {
  position: relative;
  width: 95%;
  max-width: 700px;
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  animation: modal-fade-in 0.3s ease;
  max-height: 90vh;
}

@keyframes modal-fade-in {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: var(--dark-text);
}

.close-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: #666;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background-color: #f5f7fb;
  color: var(--danger-color);
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  padding: 15px 20px;
  border-top: 1px solid #f0f0f0;
}

/* 表单样式 */
.form-group {
  margin-bottom: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark-text);
}

.required {
  color: var(--danger-color);
}

input, select, textarea {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}

textarea {
  resize: vertical;
  min-height: 100px;
}

.image-preview {
  margin-top: 10px;
  border-radius: 8px;
  overflow: hidden;
  max-height: 150px;
}

.image-preview img {
  width: 100%;
  height: auto;
  max-height: 150px;
  object-fit: contain;
}

/* 技术栈输入样式 */
.tech-input {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 10px;
  background-color: white;
}

.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.tech-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-color: #f5f7fb;
  color: #666;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 500;
}

.remove-tag {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  color: #666;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.remove-tag:hover {
  background: var(--danger-color);
  color: white;
}

.tech-add {
  display: flex;
  gap: 10px;
}

.tech-add input {
  flex-grow: 1;
}

.add-tech-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: #f5f7fb;
  border: 1px solid #e0e0e0;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.add-tech-btn:hover {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

/* 切换开关样式 */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 22px;
}

.toggle-label:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .toggle-label {
  background-color: var(--primary-color);
}

input:checked + .toggle-label:before {
  transform: translateX(22px);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .project-grid {
    grid-template-columns: 1fr;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .modal-content {
    width: 95%;
    max-height: 80vh;
  }
}
</style> 